<script setup>
import {ref, watch} from 'vue'
import { showDialog } from 'vant';
import { get, post } from "../util/request.js";
import { useRouter } from "vue-router";
import { showToast } from 'vant';

const router = useRouter()
const user = ref({})
const read = ref(false)

const back = () => {
  window.location.reload()
  history.back();
}

const sendCode = () => {
  //发送短信验证码
  get("sms/sendrcode", { phone: user.value.phone }).then(r => {
    if (r.code == 0) {
      showToast('验证码已发送到您的手机，请查收！');
    } else {
      showToast(r.data);
    }
  })
}

const add = () => {
  //实现用户注册
  post("user/register", user.value).then(r => {
    if (r.code == 0) {
      router.push("/")
    } else {
      showDialog({
        title: '注册失败！',
        message: r.data,
      })
    }
  })
}

const pass2 = ref("")
const checkPass = () => {
  if (pass2.value !== user.value.password) {
    showDialog({
      title: '请检查密码',
      message: '两次输入的密码不一致，请重新输入。',
    })
  }
}


</script>

<template>
  <div class="register-container">
    <van-nav-bar
        title="注册新用户"
        left-text="返回"
        left-arrow
        @click-left="back"
    />

    <div class="profile-pic">
      <van-image
          round
          width="100px"
          height="100px"
          src="https://sf3-cdn-tos.bdxiguastatic.com/img/mosaic-legacy/a14c0002c6b57d4585e5~300x300.image"
      />
    </div>

    <van-form @submit="add" class="register-form">
      <van-cell-group inset>
        <van-field
            v-model="user.account"
            label="账号"
            placeholder="请输入账号"
            :rules="[{ required: true, message: '请填写账号' }]"
            class="input-field"
        />
        <van-field
            v-model="user.phone"
            :rules="[{ required: true, message: '请输入手机号' }]"
            label="手机号"
            placeholder="请输入手机号"
            class="input-field"
        />
        <van-field
            v-model="user.code"
            center
            :rules="[{ required: true, message: '请输入短信验证码' }]"
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
            class="input-field"
        >
          <template #button>
            <van-button size="small" type="primary" @click="sendCode">发送验证码</van-button>
          </template>
        </van-field>
        <van-field
            v-model="user.password"
            type="password"
            :rules="[{ required: true, message: '请输入密码' }]"
            label="密码"
            placeholder="请输入密码"
            class="input-field"
        />
        <van-field
            v-model="pass2"
            type="password"
            :rules="[{ required: true, message: '请再次确认密码' }]"
            label="确认密码"
            placeholder="请再次确认密码"
            @change="checkPass"
            class="input-field"
        />
        <div class="agreement">
          <van-checkbox v-model="read" shape="square">我已阅读并同意
            <span class="policy">《用户协议》</span>和
            <span class="policy">《隐私政策》</span>
          </van-checkbox>
        </div>
        <van-button
            type="primary"
            round
            block
            native-type="submit"
            :disabled="!read"
            class="register-btn"
        >立即注册</van-button>
      </van-cell-group>
    </van-form>
  </div>
</template>

<style scoped>
.register-container {
  padding: 20px;
  //background: linear-gradient(to bottom right, rgb(226, 74, 74), #e1f3f7);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;

  /* 设置背景图片 */
  background-image: url('/hotel.jpg');
  background-size: cover;
  background-position: center;
}

.profile-pic {
  margin-bottom: 20px;
}

.register-form {
  width: 100%;
  max-width: 400px;
  background: #e1f3f7;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 10px rgb(157, 28, 171);
}

.input-field {
  margin-bottom: 15px;
}

.agreement {
  margin-bottom: 15px;
  font-size: 14px;
  color: #e24a66;
}

.policy {
  color: #4ae29e;
  cursor: pointer;
}

.register-btn {
  background-color: rgba(74, 226, 221, 0.93); /* 品牌主色调 */
  color: #e24a66;
}

.van-nav-bar {
  margin-bottom: 20px;
  width: 100%;
}

.van-button--primary {
  background-color: #4ae29e;
  border-color: #e24a4a;
}

.van-field__control {
  font-size: 16px;
}

.van-checkbox__label {
  font-size: 14px;
}
</style>
